<template>
	<view class="container">
		<navSearchBar title="访问记录" ></navSearchBar>
		<view class="tab flex-col-between">
			<text v-for="(item,index) in tab" :style="{color:current== index?'#3B54DA':'#5B5D65'}"
				@click="tabChage(index)">{{item.name}}</text>
		</view>
		<view class="body">
		<scroll-view class="scroll" scroll-y @scrolltolower="loadMore">
		<view class="list">
			<view class="list-item" v-for="item in list" :key="item.id" @click="toDetail(item)">
				<view class="item-header flex-row-center">
					<image :src="item.role_id == 1?item.user.avatar:item.contact.avarat" mode=""></image>
					<text>{{item.role_id == 1?item.user.nickname:item.contact.name}}</text>
					<text>{{item.group}}</text>
				</view>
				<view class="item-content">
					<view class="content-label">浏览内容: </view>
					<view class="content-text ellipsis">{{item.module}}</view>
				</view>
			</view>
		</view>
		</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordType:"",
				tab:[
					{name:"首页"},
					{name:"产品"},
					{name:"专题"},
					{name:"案例"},
					{name:"基地"},
					{name:"讲师"},
					{name:"供应商"},
				],
				current:0,
				list:[],
				page:1,
				pageSize:10,
				total:0,
			};
		},
		onLoad() {
			this.recordType = this.$Route.query.type
			console.log(this.recordType,"type")
			this.getList()
		},
		methods:{
			async getList(module) {
				uni.showLoading({
					title: '加载中'
				})
				
				let par = {
					module:this.tab[this.current].name,
					page:this.page,
					limit:this.pageSize,
					}
				let res 
				if(this.recordType == 1) {
					res = await this.$api.visitList(par)
				} else {
					res = await this.$api.myVisitList(par)
				}
				if(res.data.status) {
					uni.hideLoading();
					let list =res.data.data.data||[];
					this.list = this.list.concat(list);
					this.total = res.data.data.total;
				}
			
			},
			loadMore() {
				console.log('loamoer',this.page,this.list.length)
				if(this.total <= this.page * this.pageSize) return
				this.page++
				this.getList()
			},
			tabChage(num) {
				this.current = num;
				this.list = [];
				this.page = 1;
				this.getList()
			},
			toDetail(info) {
				this.$Router.push({name:"recordDetail",query:{id:info.id,customer:info.client_id,type:this.recordType}})
			} 
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}
	.tab {
		height: 98rpx;
		padding: 40rpx 30rpx 30rpx;
		border-bottom: 2rpx solid #EFEFEF;
	
		text {
			font-size: 28rpx;
			font-weight: Regular;
		}
	}
	.body{
		flex: 1;
		height: 100%;
		overflow: hidden;
	}
	.scroll {
		height: 100%;
	}
	.list {
		// flex-grow: 1;
		// overflow: scroll;
		padding: 10rpx 30rpx;
		padding-bottom: 160rpx;
		.list-item {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #EFEFEF;
			box-sizing: border-box;
		}

		.item-header {
			margin-bottom: 32rpx;
		
			image {
				width: 36rpx;
				height: 36rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}

			text {
				font-size: 28rpx;
				font-weight: Semibold;
				color: #525252;
				&:last-child {
					margin-left: auto;
				}
			}
		}
		.item-content {
			display: flex;
			align-items: flex-start;
			line-height: 48rpx;
			font-size: $text-size;
			color: #6F6F6F;
			.content-label {
				width: 120rpx;
				margin-right: 10rpx;
			}
			.content-text {
				width: 560rpx;
			}
		}
	}
</style>